import React, { useEffect } from 'react'

export default function CirCleLoading() {
  useEffect(() => {
    /*
    * 本例只需修改1处，即:wh变量
    */
    var wh = 150
    var strokeWidth = 10//线的粗细
    var stroke = "#68E534"
    var animTime = '2.5s'


    document.getElementById('example2').innerHTML =
      `
    <svg class="wsj_svg_wrap2" style="width:${wh}px;height:${wh}px;">
      <circle class="path circle" cx="50%" cy="50%" fill="none" stroke-linecap="round" stroke="${stroke}" r="${wh / 2 - strokeWidth / 2}" stroke-width="${strokeWidth}" />
    </svg>
    `
    var odiv = document.querySelector('.wsj_svg_wrap2')
    var circle = document.querySelector('.wsj_svg_wrap2 .circle')
    odiv.style.setProperty('--wh', wh)
    odiv.style.setProperty('--s', animTime)
    odiv.style.setProperty('--r', wh / 2 - strokeWidth / 2)
    circle.style.setProperty('--l', circle.getTotalLength() + 1)
    circle.style.setProperty('--s', animTime)
  }, [])
  return (
    <div id="example2"></div>
  )
}
